<template>
    <div class="top">
        <div class="top-data">
            <input type="checkbox" name="" style="width: 30px; height: 30px" />
            <img :src="imgUrl" alt="" />
            <div class="data">
                <div class="type">
                    <p class="name">{{ text }}</p>
                    <p class="col">白色&#10150;</p>
                </div>
                <div class="money">
                    <p class="sss">
                        ￥<span>{{ overprice }}</span>
                    </p>
                    <p class="s">
                        <button @click="rce(index)" :disabled="num == 1">-</button>
                        {{ num }}
                        <button @click="add(index)">+</button>
                    </p>
                </div>
            </div>
        </div>
        <one></one>
        <one></one>
        <one></one>

        <p class="sv">更多 &#8681;</p>
    </div>
</template>

<script>
import one from './top-one';
export default {
    data() {
        return {
            id: 1,
            num: 1,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F26bb5c81678badf7aee10926cf5d709f38308becaa81-nVRbEW_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657012489&t=988a750dfc08f3edd4356d6e42d1a2bd',
            text: '小米11 Ultra,开启影像新时代',
            price: 1999
        };
    },
    components: {
        one
    },
    methods: {
        rce() {
            this.num--;
        },
        add() {
            this.num++;
        }
    },
    computed: {
        overprice() {
            let all = 0;
            all += this.price * this.num;
            return all;
        }
    }
};
</script>

<style lang="scss" scoped>
.top {
    background-color: #fff;
    margin-top: 20px;
}
.top-data {
    padding: 10px;
    display: flex;
    align-items: center;
    height: 300px;
    img {
        height: 300px;
    }
    .data {
        height: 300px;
        width: 600px;
        padding: 0 40px;
        .type {
            height: 150px;
            .name {
                font-size: 30px;
            }
            .col {
                margin-left: 20px;
                color: rgb(170, 169, 169);
            }
        }
        .money {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .sss {
                font-size: 30px;
                color: orange;
                span {
                    font-size: 40px;
                }
            }
            .s {
                font-size: 30px;
                button {
                    border: 0;
                    background-color: #fff;
                    font-size: 40px;
                    margin: 0 20px;
                }
            }
        }
    }
}
.sv {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: rgb(158, 158, 158);
    text-align: center;
}
</style>
